<template>
    <div class="job-container">
      <el-row>
        <el-col :span="24">
          <el-menu default-active="1" active-text-color="#42b983" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1">任务耗时</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <div class="grid-content bg-purple">
            <el-row>
              <el-col :span="24">
                <div class="jobinfo">
                  <span>时间线</span>
                  <div class="jobinfo-right">
                    <div class="item">
                      <span class="span-color" style="background-color: #009a61"></span>
                      <span>准备运行</span>
                    </div>
                    <div class="item">
                      <span class="span-color" style="background-color: #8CC749"></span>
                      <span>已完成</span>
                    </div>
                    <div class="item">
                      <span class="span-color" style="background-color: #999"></span>
                      <span>已中断</span>
                    </div>
                    <div class="item">
                      <span class="span-color" style="background-color: #5DB2FF"></span>
                      <span>进行中</span>
                    </div>
                    <div class="item">
                      <span class="span-color" style="background-color: #FB6E52"></span>
                      <span>失败</span>
                    </div>
                  </div>
                </div>
                <div class="chart" id="chart">
                  <LadderChart :chart-data="jobStepInfos" theme="shine" @editJobStepChecked="editJobStepChecked"></LadderChart>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><div ></div></el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-row>
              <el-col :span="24"><p class="pbold">step <span v-if="jobStepChecked">{{jobStepChecked}}</span></p></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><p class="pbold" v-if="jobStepChecked">{{jobStepInfos[jobStepChecked-1].jobStepName}}</p></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><p>状态：<span v-if="jobStepChecked">{{jobStepInfos[jobStepChecked-1].status}}</span></p></el-col>
            </el-row>

            <el-row>
              <el-col :span="24"><p class="pbold" style="margin-top: 100px">步骤详情</p></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><p v-if="jobStepChecked">开始：{{jobStepInfos[jobStepChecked-1].jobStepStartTime}}</p></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><p><span v-if="jobStepChecked">结束：{{jobStepInfos[jobStepChecked-1].jobStepEndTime}}</span></p></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><p v-if="jobStepChecked">等待：{{formatTimes(jobStepInfos[jobStepChecked-1].jobStepWaitTime)}}</p></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><p><span v-if="jobStepChecked">持续：{{formatTimes(jobStepInfos[jobStepChecked-1].jobStepTime)}}</span></p></el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-menu default-active="1" active-text-color="#42b983" background-color="#f4f6f9" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1">任务详情</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="job-bottom">
            <el-row>
              <el-col :span="24"><p>任务ID：<span v-if="jobInfos">{{jobInfos.jobId}}</span></p></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><p>任务名称：<span v-if="jobInfos">{{jobInfos.jobName}}</span></p></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><p>持续时间：<span v-if="jobInfos">{{formatTimes(jobInfos.jobTime, 's')}}</span></p></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><p>等待时间：<span v-if="jobInfos">{{formatTimes(jobInfos.jobWaitTime, 's')}}</span></p></el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><p v-if="jobInfos">{{jobInfos.jobStartTime}}~{{jobInfos.jobEndTime}}</p></el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  import LadderChart from './components/LadderChart'
  import dateApi from '@/api/kylin/date'
  import jobApi from '@/api/kylin/job'
  export default {
    name: 'info',
    components: {
      LadderChart
    },
    data() {
      return {
        jobId: this.$route.query.id,
        jobInfos: null,
        jobStepInfos: null,
        jobStepChecked: null
      }
    },
    methods: {
      editJobStepChecked(res) {
        this.jobStepChecked = this.jobStepInfos.length - res
      },
      formatTimes(str, unit) {
        return dateApi.formatTime(str, unit)
      }
    },
    created() {
      jobApi.jobInfo(this.jobId).then(resp => {
        this.jobStepChecked = 1
        this.jobInfos = resp.data.kylinJobInfo
        this.jobStepInfos = resp.data.kylinJobSteps
      })
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .job-container {
    background-color: #f4f6f9;
    height:calc(100% - 50px);
  .el-menu-demo {
    padding-left: 15px;
  }
  .jobinfo{
    margin-left: 35px;
    line-height: 30px;
    color: #999;
    font-size: 14px;
    .jobinfo-right{
      float: right;
    margin-right:15px;
      .item{
        margin-left: 15px;
        display:inline-bloke;
        float:left;
        span{
          display: inline-block;
        }
        .span-color{
          margin: auto;
          height: 5px;
          width: 5px;
        }
      }
    }
  }

  .grid-content {
    height: 537px;
    border: 1px solid #E8E8E8;
    border-radius: 3px;
    margin-top: 10px;
    margin-left: 15px;
  }
  .bg-purple-light {
    margin-right: 15px;
    p{
      margin-left: 20px;
    }
    .pbold{
    font-weight: bold;
  }
  }
  .job-bottom{
    padding: 12px;
    background-color: #fff;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 20px;
  }
  }

</style>
